<template>
  <view class="Bind">
    <view class="text-center margin-bottom-lg text-bold text-xl">
      关联用户登录
    </view>
    <form @submit="onBindFormSubmit">

      <view class="cu-form-group" v-show="bindLoginType === 'user'">
        <view class="title">用户编号</view>
        <input placeholder="请输入用户编号" name="USERNO">
      </view>

      <view class="cu-form-group" v-show="bindLoginType === 'phone'">
        <view class="title">手机号</view>
        <input name="PHONENO" disabled v-model="phoneNum">
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNum" class='cu-btn bg-green shadow'>授权手机号</button>
      </view>

      <view class="cu-form-group">
        <view class="title">密码</view>
        <input type="password" placeholder="请输入密码" name="PASSWORD">
      </view>

      <!-- <view class="cu-form-group">
        <view class="text-sm">
          <checkbox @tap="togglePolicyCheck"  :checked="isPolicyChecked" :class="{'checked': isPolicyChecked}" class='blue round margin-right-xs' style="transform: scale(0.7)"></checkbox>
          同意<text class="text-blue" @tap="toPolicy">《系统隐私协议》</text>
        </view>
      </view> -->

      <view class="flex justify-between text-sm padding-left padding-right margin-top-sm text-gray" @tap="toggleLoginType">
        <view class="text-left">使用{{ bindLoginType === 'user' ? '手机号' : '用户编号' }}登录</view>
       <!-- <view class="text-right text-green" @tap="toRegister">
          前往注册<text class="cuIcon-right"></text>
        </view> -->
      </view>

      <view class="margin-top flex justify-center">
        <button form-type="submit" class="cu-btn bg-blue round shadow">授权登录</button>
      </view>
    </form>

  </view>
</template>

<script lang="ts" setup>
import {usePhoneNum} from "./usePhoneNum";
import {useLoginType} from "./useLoginType";
import {usePolicyCheck} from "./usePolicyCheck";
import {bindLogin} from "../../api/auth";
import {useStore} from "vuex";
import {Md5} from 'ts-md5/dist/md5'
const {bindLoginType, toggleLoginType} = useLoginType()

const {phoneNum, getPhoneNum} = usePhoneNum()

const {isPolicyChecked, togglePolicyCheck} = usePolicyCheck()

const {getters, dispatch} = useStore()

function toRegister(){
  uni.navigateTo({
    url: '/pages/register/index'
  })
}

function toPolicy(){
  uni.navigateTo({
    url: '/pages/policy/index'
  })
}

function toAccount(){
  uni.switchTab({
    url: '/pages/account/index'
  })
}

function onBindFormSubmit(e: any): void{
  const form = e.detail.value

  if (bindLoginType.value === 'phone' && !form.PHONENO){
    uni.showToast({
      icon: 'error',
      title: '未授权手机号',
      mask: true
    })

    return
  }

  if (bindLoginType.value === 'user' && !form.USERNO){
    uni.showToast({
      icon: 'error',
      title: '请输入用户编号',
      mask: true
    })

    return
  }

  if (!form.PASSWORD.length){
    uni.showToast({
      icon: "error",
      title: '请输入密码',
      mask: true
    })
    return
  }

  // if (!isPolicyChecked.value){
  //   uni.showToast({
  //     icon: 'none',
  //     title: '请先阅读并同意隐私协议',
  //     mask: true
  //   })

  //   return
  // }

  const {USERNO,PHONENO,PASSWORD} = form
  const {OPENID} = getters
  const md5Password = Md5.hashStr(PASSWORD).toUpperCase()

  bindLogin({
    USERNO,
    PHONENO,
    PASSWORD: md5Password,
    OPENID,
    // SESSION_KEY: '',
    OPERATOR_ID: 0
  }).then(res => {
    if (res.ERROR[0].errcode == '0'){
      uni.showToast({
        title: '关联用户成功',
        icon: 'success',
        mask: true
      })

      setTimeout(() => {
        dispatch('login').finally(() => {
          uni.switchTab({
            url: '/pages/account/index'
          })
        })
      },500)

    }else {
      uni.showToast({
        title: res.ERROR[0].error,
        icon: 'none',
        mask: true
      })
    }
  })
}
</script>

<style scoped lang="scss">
.Bind{
  box-sizing: border-box;
  //padding: 20rpx;
  padding-top: 100rpx;

}
</style>
